<template>
  <div class="panel-container">
    <el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin">
      <el-tab-pane name="componentLib">
        <span slot="label"
          ><i class="el-icon-set-up"></i>
          {{ i18nt("designer.componentLib") }}</span
        >

        <draggable-template
          v-if="firstTab === 'componentLib'"
          :designer="designer"
          :fVisible="fVisible"
          :width="width"
        >
        </draggable-template>
      </el-tab-pane>
      <el-tab-pane name="levelTree">
        <span slot="label"><svg-icon icon-class="level" /> 层级</span>

        <level-tree :designer="designer" v-if="firstTab === 'levelTree'">
        </level-tree>
      </el-tab-pane>
      <el-tab-pane name="globalTemplate">
        <span slot="label"
          ><i class="el-icon-c-scale-to-original"></i>通用模板</span
        >

        <template v-for="(ft, idx) in formTemplates">
          <el-card
            :key="idx"
            :bord-style="{ padding: '0' }"
            shadow="hover"
            class="ft-card"
          >
            <el-popover placement="right" trigger="hover">
              <img slot="reference" :src="ft.imgUrl" style="width: 200px" />
              <img :src="ft.imgUrl" style="height: 600px; width: 720px" />
            </el-popover>
            <div class="bottom clear-fix">
              <span class="ft-title">#{{ idx + 1 }} {{ ft.title }}</span>
              <el-button
                type="text"
                class="right-button"
                @click="loadFormTemplate(ft.data)"
              >
                {{ i18nt("designer.hint.loadFormTemplate") }}</el-button
              >
            </div>
          </el-card>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import i18n from "@/utils/i18n";
import SvgIcon from "@/components/svg-icon";
import DataSource from "@/components/form-designer/widget-panel/data-source.vue";
import MsDrawer from "../../../components/ms-drawer/ms-drawer-base.vue";
import CodeSource from "@/components/form-designer/widget-panel/code-source.vue";
import DraggableTemplate from "@/components/form-designer/widget-panel/draggable-template.vue";
import LevelTree from "@/components/form-designer/toolbar-panel/levelTree.vue";
import { formTemplates } from "./templatesConfig";
import axios from "axios";

export default {
  name: "FieldPanel",
  mixins: [i18n],
  components: {
    LevelTree,
    DraggableTemplate,
    CodeSource,
    MsDrawer,
    DataSource,
    SvgIcon,
  },
  props: {
    designer: Object,
    common: Object,
    width: String,
    fVisible: Boolean,
  },
  data() {
    return {
      firstTab: "componentLib",
      formTemplates: formTemplates,
    };
  },
  methods: {
    loadFormTemplate(data) {
      this.$confirm(
        this.i18nt("designer.hint.loadFormTemplateHint"),
        this.i18nt("render.hint.prompt"),
        {
          confirmButtonText: this.i18nt("render.hint.confirm"),
          cancelButtonText: this.i18nt("render.hint.cancel"),
        }
      )
        .then(() => {
          let modifiedFlag = false;
          modifiedFlag = this.designer.loadFormJson(data);
          if (modifiedFlag) {
            this.designer.emitHistoryChange();
          }
          this.$message.success(
            this.i18nt("designer.hint.loadFormTemplateSuccess")
          );
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.color-svg-icon {
  -webkit-font-smoothing: antialiased;
  color: #7c7d82;
}

.side-scroll-bar {
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

.panel-container {
  padding-bottom: 10px;
  height: 100%;
  box-sizing: border-box;

  ::v-deep > .el-tabs {
    height: 100%;

    > .el-tabs__content {
      height: calc(100% - 40px);

      > .el-tab-pane {
        height: 100%;
        overflow-y: scroll;
      }
    }
  }
}

.no-bottom-margin ::v-deep .el-tabs__header {
  margin-bottom: 0;
}

.indent-left-margin {
  width: 100%;

  ::v-deep .el-tabs__nav {
    margin-left: 20px;
  }
}

.el-card.ft-card {
  border: 1px solid #8896b3;
}

.ft-card {
  margin-bottom: 10px;

  .bottom {
    margin-top: 10px;
    line-height: 12px;
  }

  .ft-title {
    font-size: 13px;
    font-weight: bold;
  }

  .right-button {
    padding: 0;
    float: right;
  }

  .clear-fix:before,
  .clear-fix:after {
    display: table;
    content: "";
  }

  .clear-fix:after {
    clear: both;
  }
}
</style>
